<template>
  <div>
     
    <transition name="section">
      <section v-if='visible'>

          
        <div class="xAxis-tag-wrap">
          <el-tag
            :closable="true"
            :close-transition="false"
            @close="handleClose"
            v-show='visible'
            type="primary"
            >
              {{tagName}}
          </el-tag>
        </div>

        <transition-group tag='ul' name="ul" class="number-wrap">
          <li v-for ='(k,i) in list' :key='k.id'>
            <el-input
              style='width:150px'
              placeholder="自定义类"
              icon="edit"
              readonly
              size='small'
              v-model="k.title"
              @click.native.stop="dialogIndex = i;dialogVisible = true"
              :on-icon-click="()=>{dialogIndex = i;dialogVisible = true}">
            </el-input>

            <span class="handle">
              <a v-if='i == list.length -1' @click.stop = 'addList'>增加</a>
              <a @click.stop = 'removeList(i)'>删除</a>
            </span>
            
          </li>
        
        </transition-group>

        
      </section>

    </transition>

    <v-dialog 
      :defaultTitle='toDialogData({type:"title"})' 
      :defaultSelected='toDialogData({type:"selected"})' 
      :dialogVisible.sync='dialogVisible'
      @getEducationData='handleEducationData' 
    /> 
  </div>

</template>

<script>
import VDialog from './educationDialog.vue'
export default {
  components: {
    VDialog
  },
  props: {

    tagName: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      dialogVisible: false,
      dialogIndex: 0,
      list: [],
      educationData: []
    }
  },
  watch: {
    visible (newValue) {
      newValue == false && (this.handleClose())
      newValue == true && (this.addList())
    }
  },
  methods: {

    toDialogData ({ type }) {
      const i = this.dialogIndex
      if (this.educationData.length && this.educationData[i]) {
        return type === 'title' ? this.educationData[i].title : this.educationData[i].selected
      }
    },

    removeList (i) {

      this.list.splice(i, 1)
      this.educationData.splice(i, 1)
      this.list.length == 0 ? this.handleClose() : this.emitData()
    },
    addList () {
      this.list.push({ title: '', id: Math.random() })
      this.educationData.push({ title: '', selected: [] })
    },

    handleEducationData (data) {
      const i = this.dialogIndex
      this.educationData.splice(i, 1, data)
      this.list[i].title = this.educationData[i].title
      this.emitData()
    },

    getTransFromData () {

      let result = { educationTitle: '', education: '' }

      this.educationData
        .filter(ele => ele.title && ele.selected.length)
        .forEach((ele, i, arr) => {
          let title = i === arr.length - 1 ? ele.title : ele.title + ','
          let selected = i === arr.length - 1 ? ele.selected.join(',') : ele.selected.join(',') + ';'
          result.educationTitle += title
          result.education += selected
        })

      return result
    },


    emitData () {

      this.$nextTick(() => {
        this.$emit('getSelected', this.getTransFromData())
      })
    },
    handleClose () {
      this.list = []
      this.educationData = []
      this.$emit('update:visible', false)
      this.emitData()
    }
  },
}
</script>

<style>
section .number-wrap>li input {
  position: relative;
  z-index: 0;
}
</style>


<style scoped lang='less'>
.section-enter-active {
  transition: all 0.4s;
}

.section-leave-active {
  transition: all 0.4s;
}
.section-enter {
  opacity: 0;
  transform: translateY(-50px);
}

.section-leave-to {
  opacity: 0;
  transform: translateX(200px);
}
section {
  margin: 30px 0;
  width: 900px;
  overflow: hidden;

  & > .xAxis-tag-wrap {
    float: left;
  }

  & > .number-wrap {
    margin-left: 70px;
    float: left;
    width: 700px;
    overflow: hidden;
    .ul-enter-active {
      transition: all 0.4s;
    }

    .ul-leave-active {
      transition: all 0.4s;
    }
    .ul-enter {
      opacity: 0;
      transform: translateY(30px);
    }

    .ul-leave-to {
      opacity: 0;
      transform: translateX(-100px);
    }
    & > li {
      margin-bottom: 20px;
      display: inline-block;
    }

    & > li:last-of-type,
    & > li:nth-last-of-type(2) {
      margin-bottom: 0px;
    }

    & > li:nth-of-type(2n + 1) {
      padding-right: 80px;
    }
    .handle {
      a {
        margin-left: 6px;
        cursor: pointer;
      }
      & > a:first-of-type {
        color: #38f;
      }

      & > a:last-of-type {
        color: rgb(255, 91, 91);
      }
    }
  }
}
</style>